// profile.js
const { userProfile, blogPosts } = require('../../utils/data');
const app = getApp();

Page({
  data: {
    userInfo: {},
    stats: [],
    menuItems: [],
    recentPosts: [],
    t: {}, // Translations
    currentLanguage: 'en'
  },
  
  onLoad: function() {
    // Initialize translations
    this.loadLanguage();
    
    // Get user profile data
    const { avatar, nickname, bio, stats } = userProfile;
    
    // Format stats for display
    const formattedStats = [
      { label: this.data.t.posts || 'Posts', value: stats.posts },
      { label: this.data.t.followers || 'Followers', value: stats.followers },
      { label: this.data.t.following || 'Following', value: stats.following }
    ];
    
    // Get the most recent 3 posts
    const recentPosts = blogPosts.slice(0, 3);
    
    // Create menu items with translations
    const menuItems = [
      { icon: 'star', text: this.data.t.savedPosts || 'Favorites', badge: 5 },
      { icon: 'history', text: 'Reading History' },
      { icon: 'settings', text: this.data.t.settings || 'Settings' },
      { icon: 'info', text: 'About' }
    ];
    
    this.setData({
      userInfo: { avatar, nickname, bio },
      stats: formattedStats,
      recentPosts,
      menuItems
    });
  },
  
  // Load translations based on current language
  loadLanguage() {
    const i18n = app.globalData.i18n;
    const currentLanguage = i18n.getLanguage();
    
    // Create translations object
    const t = {
      myPosts: i18n.t('myPosts'),
      savedPosts: i18n.t('savedPosts'),
      settings: i18n.t('settings'),
      editProfile: i18n.t('editProfile'),
      newPost: i18n.t('newPost'),
      posts: i18n.t('posts'),
      followers: i18n.t('followers'),
      following: i18n.t('following')
    };
    
    this.setData({
      t,
      currentLanguage
    });
  },
  
  // Handle language change event from navigation bar
  onLanguageChange(e) {
    const language = e.detail.language;
    app.globalData.i18n.setLanguage(language);
    this.loadLanguage();
    
    // Update stats labels
    const { stats } = userProfile;
    const formattedStats = [
      { label: this.data.t.posts || 'Posts', value: stats.posts },
      { label: this.data.t.followers || 'Followers', value: stats.followers },
      { label: this.data.t.following || 'Following', value: stats.following }
    ];
    
    // Update menu items
    const menuItems = [
      { icon: 'star', text: this.data.t.savedPosts || 'Favorites', badge: 5 },
      { icon: 'history', text: 'Reading History' },
      { icon: 'settings', text: this.data.t.settings || 'Settings' },
      { icon: 'info', text: 'About' }
    ];
    
    this.setData({
      stats: formattedStats,
      menuItems
    });
  },
  
  onMenuTap(e) {
    const index = e.currentTarget.dataset.index;
    const item = this.data.menuItems[index];
    wx.showToast({
      title: `Clicked on ${item.text}`,
      icon: 'none'
    });
  },
  
  onPostTap(e) {
    const postId = e.detail.id;
    wx.navigateTo({
      url: `/pages/post-detail/post-detail?id=${postId}`
    });
  },
  
  onNewPostTap() {
    wx.navigateTo({
      url: '/pages/post-editor/post-editor'
    });
  }
})